<template>
  <div class="MPlayer">
    <div class="box-left">
      <img :class="!flag?'imgactive':''" :src="player.picUrl" alt="" />
      <span>{{ player.name }}</span>
    </div>
    <div class="box-right">
      <i v-if="flag == true" class="iconfont icon-bofang" @click="getplay"></i>
      <i
        v-if="flag == false"
        class="iconfont icon-zanting2"
        @click="getplay"
      ></i>
      <i class="iconfont icon-24gf-playlistMusic4" @click="getMPopupflagF"></i>
    </div>
    <audio :src="player.MusicUrl" ref="audio" @timeupdate="changeMusic"></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      player: {},
      flag: true,
      currentTime:0,
    };
  },
  created() {
    this.getvuex();
  },
  methods: {
    // 定义一个方法获取到vuex中的数据
    getvuex() {
      if (!this.$store.state.playerflag) {
      } else {
        this.player = this.$store.state.playerflag;
      }
      this.currentTime = this.$store.state.currentTime;
      console.log('vuex中的数据',this.$store.state.currentTime);
    },
    getplay() {
      if (this.flag) {
        this.flag = false;
        this.$refs.audio.play();
        this.$refs.audio.currentTime = this.currentTime
      } else {
        this.flag = true;
        this.$refs.audio.pause();
      }
    },
    changeMusic(){
        this.$store.commit('getcurrentTime',this.$refs.audio.currentTime)
    },
    getMPopupflagF(){
      this.$store.commit('getMPopupflag',true)
      this.$emit('playPopup', this.$store.state.MPopupflag)
    }
  },
};
</script>

<style scoped lang="scss">
.MPlayer {
  width: 100%;
  height: 180px;
  z-index: 999;
  position: fixed;
  left: 0;
  bottom: 195px;
  background: #fafafa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .box-left {
    display: flex;
    align-items: center;
    font-size: 80px;
    img {
      width: 166px;
      height: 166px;
      border-radius: 50%;
      margin-right: 20px;
    }
    .imgactive {
      animation: imgs 6s linear;
    }
    @keyframes imgs {
      0% {
        transform: rotateZ(0deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }
  }
  .box-right {
    display: flex;
    align-items: center;
    i {
      font-size: 140px;
      margin: 0 30px;
      color: #22d59c;
    }
  }
}
</style>